<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .form {
            width: 500px;
           
        }
        .form > div {
            width: 500px;
            position: relative;
        }
        .form > div input {
            width: 400px;
            padding-left: 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            outline: none;
            height: 40px;
            font-size: 20px;
            vertical-align: middle
        }
        .form > div input:focus {
            border: 2px solid deepskyblue;
        }
        .form > div button {
            width: 70px;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="form">
        <div>
            <input type="text" placeholder="手机号码"><button>提交</button>
        </div>
    </div>
    <script>
        // 要求：
            // 验证手机号码

        // 定义手机号码正则表达式
        // var regE01 = /^1[3-9][0-9]{9}$/
        var regE01 = /^1[3-9]\d{9}$/;// 匹配字符总数11个
        // console.log(regE01.test(13566666666));//true
        // console.log(regE01.test(15566666666));//true
        // console.log(regE01.test(18566666666));//true
        // console.log(regE01.test(12566666666));//false

        // 获取相关的元素
        var inp = document.querySelector(".form input");
        var btn = document.querySelector(".form button");

        // 事件绑定
        btn.onclick = function(){
            // 获取输入框
            var v1 = inp.value;
            console.log(v1);
            // 判断是否为空
            if(v1.length == 0) return ;
            // 判断是否符合手机格式
            if(regE01.test(v1)) {
                alert("正确的格式");
            }else {
                alert("错误的格式");
            }
        }
        



    </script>
</body>
</html>